<template>
  <div class="index-top">
    <div class="index-top-img" :style="bgStyle(topImg)">
      <div class="Anime-title">
        <div class="index-top-english">{{ english }}</div>
        <div class="index-top-title">{{ title }}</div>
        <div class="index-top-txt1">{{ txt1 }}</div>
        <div class="index-top-txt2">{{ txt2 }}</div>
      </div>
    </div>
    <div class="index-top-nav">
      <div
        @click="NavSelect(index)"
        class="index-top-nav-item"
        :key="index"
        v-for="(item, index) in navList"
      >
        <div class="index-top-nav-item-icon">
          <img v-if="iconVlue != index" :src="item.icon1" alt="" />
          <img v-else :src="item.icon2" alt="" />
        </div>

        <div class="index-top-nav-item-title" ref="navTitle">
          {{ item.name }}
        </div>
        <div class="index-top-nav-item-txtAll" ref="txtRef">
          <div
            class="index-top-nav-item-txt"
            v-for="(item2, index) in item.title.split(',')"
            :key="index"
          >
            {{ item2 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { bgStyle } from "../../utils/common.js";
import wz1 from "../../imgs/icon/site.png";
import wz2 from "../../imgs/icon/wangzhanjianshe.png";
import erp1 from "../../imgs/icon/ERP.png";
import erp2 from "../../imgs/icon/ERP_1.png";
import app1 from "../../imgs/icon/shoujiapp.png";
import app2 from "../../imgs/icon/shouapp2.png";
import wx1 from "../../imgs/icon/xiaochengxukaifa_1.png";
import wx2 from "../../imgs/icon/pre_icon_小程序.png";
import st1 from "../../imgs/icon/shengtaihezuo.png";
import st2 from "../../imgs/icon/icon-shengtaihezuoyu.png";
const navList = ref([
  {
    name: "网站建设",
    english: "WEBSITE CONSTRUCTION",
    title: "后台网站、企业官网设计开发,特殊需求网站定制设计开发",
    icon1: wz1,
    icon2: wz2,
    imgUrl: "http://114.132.238.206/image/1-1ZI1091IQD.jpg",
  },
  {
    name: "ERP系统",
    english: "ERP SYSTEM",
    title: "企业管理系统，有效资源共享与利用,一对多、多对多的定制开发",
    icon1: erp1,
    icon2: erp2,
    imgUrl: "http://114.132.238.206/image/1-1ZI1091933311.jpg",
  },
  {
    name: "手机APP",
    english: "APP DEVELOPMENT",
    title: "手机软件设计开发,苹果、安卓端的移动设备设计开发",
    icon1: app1,
    icon2: app2,
    imgUrl: "http://114.132.238.206/image/1-1ZI1091IQD.jpg",
  },
  {
    name: "微信小程序",
    english: "WeCHAT MINI PROGRAM",
    title: "产品的小程序一键式设计开发,方便快捷，传播广泛，内容丰富",
    icon1: wx1,
    icon2: wx2,
    imgUrl: "http://114.132.238.206/image/1-1ZI1091IQD.jpg",
  },
  {
    name: "生态合作",
    english: "ECOLOGICAL COOPERATION",
    title: "电商工具插件流媒体账号合租平台搭建,IP变现解决方案等多项拓展",
    icon1: st1,
    icon2: st2,
    imgUrl: "http://114.132.238.206/image/1-1ZI1091IQD.jpg",
  },
]);
const topImg = ref("");
const iconVlue = ref(0);
const txtRef = ref();
const navTitle = ref();
const english = ref("");
const title = ref("");
const txt1 = ref("");
const txt2 = ref("");
onMounted(() => {
  NavSelect(0);
});
function NavSelect(index) {
  iconVlue.value = index;
  topImg.value = navList.value[index].imgUrl;
  english.value = navList.value[index].english;
  title.value = navList.value[index].name;
  txt1.value = navList.value[index].title.split(",")[0];
  txt2.value = navList.value[index].title.split(",")[1];
  navTitle.value.forEach((item, i) => {
    if (i == index) {
      item.style.fontWeight = "700";
    } else {
      item.style.fontWeight = "400";
    }
  });
  txtRef.value.forEach((item, i) => {
    if (i == index) {
      item.style.borderBottom = "#497bff 3px solid";
    } else {
      item.style.borderBottom = "none";
    }
  });
}
</script>
<style scoped lang="less">
.index-top {
  width: 100vw;
  .index-top-img {
    position: relative;
    width: 100vw;
    height: 28.941vw;
    .Anime-title {
      position: absolute;
      top: 9.819vw;
      left: -10vw;
      opacity: 0;
      width: 25.84vw;
      animation: title 2s linear 1 alternate forwards;
      .index-top-english {
        font-size: 1.24vw;
        background: linear-gradient(90deg, #508bff, #6567dc);
        font-weight: 700;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .index-top-title {
        font-size: 2.481vw;
        padding: 2.481vw 0 2.171vw 0;
        color: #333;
        font-weight: 700;
      }
      .index-top-txt1,
      .index-top-txt2 {
        font-size: 1.034vw;
        color: #333;
      }
    }
    @keyframes title {
      form {
        left: -10vw;
        opacity: 0;
      }

      to {
        opacity: 1;
        left: 20.672vw;
      }
    }
  }
  .index-top-nav {
    box-sizing: border-box;
    width: 99.225vw;
    margin-top: 5.168vw;
    padding: 0 16.021vw;
    display: flex;
    justify-content: space-between;
    .index-top-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      .index-top-nav-item-title {
        margin-top: 1.55vw;
      }
      .index-top-nav-item-icon {
        width: 4.134vw;
        height: 4.134vw;
        border-radius: 2.067vw;
        background-color: #81b3c0be;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 2.842vw;
          height: 2.842vw;
        }
      }

      .index-top-nav-item-title {
        color: #333;
        font-size: 0.93vw;
      }
      .index-top-nav-item-txtAll {
        width: 10.336vw;
        margin-top: 3.101vw;
        padding-bottom: 1.034vw;
      }
      .index-top-nav-item-txt {
        color: #999;
        width: 10.336vw;
        font-size: 0.827vw;
        text-align: center;
      }
      .index-top-nav-item-txt + .index-top-nav-item-txt {
        margin-top: 0.517vw;
      }
    }
  }
}
</style>
